
$(function(){
    /*点击当日，24小时作为X轴*/
    $("#nowDay").on("click",function(){
        $(this).addClass("active");
        $(this).siblings().removeClass("active");
        var xData = [];
        var yData = [];
        for(var i=1;i<=24;i++){
            xData.push(i+"时");
             // 随机数生成24个作为Y轴
             yData.push(Math.ceil(Math.random()*100));
        }
        lineDraw(xData,yData);
    });
    /*点击当周，星期一到星期日*/
    $("#nowWeek").on("click",function(){
        $(this).addClass("active");
        $(this).siblings().removeClass("active");
        var xData = [];
        var yData = [];
        for(var i=1;i<=7;i++){
            xData.push("星期"+i);
            // 随机数生成7个作为Y轴
            yData.push(Math.ceil(Math.random()*100));
        }
        lineDraw(xData,yData);
    });
     /*点击当月，*/
     $("#nowMonth").on("click",function(){
        $(this).addClass("active");
        $(this).siblings().removeClass("active");
        var xData = [];
        var yData = [];
        // 获取当月的天数
        var date =new Date()
        var year=date.getFullYear();
        var month=date.getMonth()+1;
        var lastDay=new Date(year,month,0).getDate();
        for(var i=1;i<=lastDay;i++){
            xData.push(i);
            // 随机数生成作为Y轴
            yData.push(Math.ceil(Math.random()*100));
        }
        lineDraw(xData,yData);
    });
    /*点击当年*/
    $("#nowYear").on("click",function(){
        $(this).addClass("active");
        $(this).siblings().removeClass("active");
        var xData = [];
        var yData = [];
        for(var i=1;i<=12;i++){
            xData.push(i+'月');
            // 随机数生成作为Y轴
            yData.push(Math.ceil(Math.random()*100));
        }
        lineDraw(xData,yData);
    });
    //刷新页面，默认点击当周,有执行的先后顺序，要创建完click事件才可以调用
    $("#nowWeek").trigger("click");
    //饼状图
	var myChartPie = echarts.init(document.getElementById('doughnutChart'));
	var option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        show:false,
        orient: 'vertical',
        left: 10,
        data: ['实装信息编辑数量', '半实物装备信息编辑数量', '数字仿真模型信息编辑数量', '人员信息编辑数量', '场地信息编辑数量']
    },
    color:["#f85daa","#00c7ff","#ff677e",'#00dbf4',"lightGreen"],
    series: [
        {
            name: '试验资源编辑',
            type: 'pie',
            radius: ['80%', '88%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '20',
                        fontWeight: 'normal'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [
                {value: 335, name: '实装信息编辑数量'},
                {value: 310, name: '半实物装备信息编辑数量'},
                {value: 234, name: '数字仿真模型信息编辑数量'},
                {value: 135, name: '人员信息编辑数量'},
                {value: 158, name: '场地信息编辑数量'}
            ]
        }
    ]
};
myChartPie.setOption(option);

//柱状图
var myChartBar = echarts.init(document.getElementById('barPicture'));
var dataAxis = ['实装信息', '半实物装备信息', '数字仿真', '人员信息', '场地信息'];
var data = [220, 182, 191, 234, 290];
var yMax = 500;
var dataShadow = [];
for (var i = 0; i < data.length; i++) {
    dataShadow.push(yMax);
}
	var optionBar = {
        title: {
            text: '统计资源总数量',
            textStyle: {
                color: '#a7b9c8'
            }
            // subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
        },
        xAxis: {
            data: dataAxis,
            axisLabel: {
                inside: false,
                textStyle: {
                    color: '#a7b9c8'
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            z: 10
        },
        yAxis: {
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#999'
                }
            }
        },
        dataZoom: [
            {
                type: 'inside'
            }
        ],
        series: [
            { // For shadow
                type: 'bar',
                barWidth:20,
                itemStyle: {
                    color: 'rgba(0,0,0,0)',
                },
                barGap: '-100%',
                barCategoryGap: '40%',
                data: dataShadow,
                animation: false
            },
            {
                type: 'bar',
                barWidth:20,
                itemStyle: {
                    barBorderRadius:[16, 16, 0, 0],//圆角设置
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#83bff6'},
                            {offset: 0.5, color: '#188df0'},
                            {offset: 1, color: '#188df0'}
                        ]
                    ),
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#2378f7'},
                                {offset: 0.7, color: '#2378f7'},
                                {offset: 1, color: '#83bff6'}
                            ]
                        )
                    }
                },
                data: data
            }
        ]
    };
myChartBar.setOption(optionBar);
});

// 曲线图方法
function lineDraw(xData,yData){
    var myChart = echarts.init(document.getElementById('lineChart'));
    var option = {
        xAxis: {
            type: 'category',
            data:xData,
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#a7b9c8'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#a7b9c8'
                }
            }
        },
        series: [{
            data: yData,
            type: 'line',
            smooth: true,
            itemStyle:{
                normal:{
                    color:'#13d8ec'
                }
            },
            lineStyle:{
                normal:{
                    width:5
                }
            },
        }]
    };
    myChart.setOption(option);
}

